<template>
  <van-notify v-model:show="show" type="success">
    <van-icon style="margin-right: 4px" />
    <span>打招呼成功!请耐心等待{{ name }}的回应...</span>
  </van-notify>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24" @change="switchChange" />
    </template>
  </van-cell>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    :offset="130"
    @load="onLoad"
  >
    <user-card-list
      :user-list="userList"
      :loading="loading"
      :show-tag="false"
      isGetUser="0"
      isDetail="0"
      @showNotify="showNotify"
    />
  </van-list>
</template>

<script setup lang="ts">
import myAxios from "../plugins/myAxios";
import UserCardList from "../components/UserCardList.vue";
import { showFailToast } from "vant";
import { onMounted, ref, watchEffect } from "vue";
import { UserType } from "../models/user";
import { getCurrentUser } from "../services/user";

const show = ref(false); //展示消息通知
const name = ref(""); //反馈打招呼对象的昵称
//展示打招呼的反馈信息，由子组件触发
const showNotify = (showNot: boolean, username: string) => {
  show.value = showNot;
  name.value = username;
  setTimeout(() => {
    show.value = false;
  }, 2500);
};

/**
 * 列表模式改变时清空用户列表
 */
const switchChange = () => {
  userList.value = [];
  loadData();
};

const isMatchMode = ref(false); //是否为心动模式(按标签推荐)
const userListData = ref([]); //接收后端数据的原数组
const loadData = async () => {
  if (isMatchMode.value) {
    const num = 10;
    userListData.value = await myAxios
      .get("/user/match", {
        params: {
          num,
        },
      })
      .then(function (response) {
        return response?.data;
      })
      .catch(function () {
        showFailToast("小智遗憾告知:请求失败！！请刷新重试");
      });
  } else {
    userListData.value = await myAxios
      .get("/user/list", {
        params: {
          pageNum: 1,
          pageSize: 8,
        },
      })
      .then(function (response) {
        return response?.data;
      })
      .catch(function (error) {
        showFailToast("小智遗憾告知:请求失败!!请刷新重试");
      });
  }
  if (userListData.value.length !== 0) {
    onLoad();
  }
};

const myFriendIdList = ref([]); //所有好友的id列表
const loading = ref(false); //是否处于加载状态
const finished = ref(false); //是否加载完成
const userList = ref([]); //用作展示的数组
const onLoad = () => {
  if (userListData.value.length !== 0) {
    const userArr = userListData.value.splice(0, 10); //过渡的数组
    if (userListData.value.length === 0) {
      finished.value = true;
    }
    userArr.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
      if (myFriendIdList.value.find((id) => id === user.id)) {
        user.isMyFriend = true;
      }
      userList.value.push(user);
    });
  }
};

const currentUser = ref({} as UserType); //当前用户
onMounted(async () => {
  currentUser.value = await getCurrentUser("1");
  await myAxios
    .get("/user/myFriendId", {
      params: {
        userId: currentUser.value.id,
      },
    })
    .then((res) => {
      if (res.code === 0 && res.data) {
        myFriendIdList.value = res.data;
      }
    });
  loadData();
});
</script>
